/* 登录 */
.loginPage{
    display: none;width:100%;height: 100%; background-color: rgb(19, 18, 18,0.5);
    position: absolute;z-index: 99;}
.newlogin{
    width: 322px; background-color: #fff;position: fixed;top:50%;left:50%;
    transform: translate(-50%,-50%);border-radius: 20px;padding: 50px;}
.newlogin>p{margin: 40px 0;display: flex;text-align: center;}
.newlogin>p>span{color: #333;font-size: 18px;width: 50%;display: block;}
.newlogin>p>b{width: 1px;}
.setting{
    width: 300px;height: 40px;line-height: 40px;margin: 20px auto;border-radius: 30px;
    border: 1px solid #dddddd;}
.setting input{outline: none;border: none;border-radius: 30px;padding: 0 15px;}
.setting span{width: 20px;height: 20px;display:inline-block; background: url(./images/newico.png) no-repeat;
background-position: 0 -40px;padding-right: 10px;}
.bindusergray{background: #999; height: 42px;line-height: 42px;border-radius: 30px;text-align: center;color: #fff; }
.gotologin>b{display: flex; margin-top: 45px;margin-bottom: 25px;height: 49px;justify-content: space-between;align-items: center;}
.gotologin .zhifubao{width: 36px;height: 36px;background: url(./images/newico2.png);display:inline-block;}
.gotologin .weixin{width: 36px;height: 36px;background: url(./images/newico2.png) -43px 0;display: inline-block;}
.gotologin .qq{width: 36px;height: 36px;background: url(./images/newico2.png) -86px 0;display: inline-block;}
.gotologin .codevar{margin-right: 10px;line-height: 100%;}





#headerTop{
    height: 28px;
    border-bottom: 1px solid #ddd;
    background: #f5f5f5;
    position: relative;
    display: flex;
    align-items: center;
}
#headerTop nav a{
    margin-left: 10px;
}
#header{
    width: 100%;
    height: 100px;
    position: relative;
    padding-top: 10px;
}
.logo{
    height: 94px;
    width: 268px;
    background: url(../images/cat-logo.png) no-repeat 0px -12px;
}
/* 搜索框 */
.search{
    margin: 23px 0 0 33px;
}
.search input{
    box-sizing: border-box;
    border: #e74085 solid 2px;
    width: 406px;
    height: 34px;
    padding: 0 5px 0 15px;
    line-height: 30px;
    font-size: 14px;
    float: left;
    outline: none;
}
.search button{
    width: 73px;
    height: 34px;
    color: #FFF;
    font-size: 14px;
    background-color: #e74085;
    border: none;
}
.keywords{
    margin: 10px 0;
    width: 498px;
    height: 17px;
    overflow: hidden;
}
.keywords label{
    float: left;
    display: inline;
    white-space: nowrap;
    color: #999;
}
.keywords a{
    float: left;
    display: inline;
    white-space: nowrap;
    color: #999;
}
.keywords span{
    float: left;
    display:inline;
    white-space: nowrap;
    color: #999;
    margin:0 10px;
}
.keywords a.cred{
    color: red;
}
/* 购物车 */
.go-buy{
    margin: 23px 0 0;
    width: 130px;
    height: 39px;
    text-align: center;
    background: url(../images/shopping-cart1.gif);
}
.go-buy a{
    line-height: 39px;
    color: #666;
    margin-left: 16px;
}
.go-buy a i{
    color: #dd2727;
}
.nav aside{
    width: 228px;
    display: flex;
}




/* 商品导航 */
.nav >aside>span{
    position: relative;
    width: 112px;
    height: 32px;
    text-align: center;
    border: 1px solid #e1e1e1;
    color: #666;
    display: block;
    z-index: 1;
}
.nav>aside>span> a{
    color: #444;
    font-size: 16px;
    line-height: 32px;
}
.nav>aside>span>b{
    display: inline-block;
    width:16px;
    height:13px;
    margin-top:-2px;
    background:url(../images/bg2.png) no-repeat -17px -1257px;
    margin-left: 5px;
}
.nav>aside>span:nth-child(2) b{
    width: 13px;
    height: 7px;
    background-position: -17px -1276px ;
}
.nav>aside>span:nth-child(2):hover .goodsSort{
    display: block;
}
.nav .goodsSort{
    display: block;
    position: absolute;
    width: 200%;
    background-color: #fff;
    left: -100%;
    top: 34px;
}
.nav .goodsSort li{
    height: 72px;
    padding-left: 15px;
    padding-right: 10px;
}
.nav .goodsSort li h3{
    width: 100%;
    height: 100%;
    display: flex;
    text-align: center;
    align-items: center;
    /* border-bottom: 1px dashed #999; */
}
/* 三角形 */
.nav .goodsSort li h3 div{
    border: 5px solid #999;
    height: 0;
    width: 0%;
    border-color: transparent transparent transparent #999;
}
.nav .goodsSort li h3 a{
    width: 100%;
    height: 100%;
    line-height: 72px;
}
.nav .goodsSort li:hover aside{
    display: block;
}
/* 移入打开菜单 */
.nav .goodsSort li aside {
    display: none;
    background-color: #fff;
    border: 2px solid #e74085;
    position: absolute;
    left: 100%;
    top: 0;
    width: 550px;
}
.nav .goodsSort li aside ul{
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
}
.nav .goodsSort li aside ul>span{
    font-size: 16px;
    text-align: center;
    color: #000;
    border: none;
    line-height: 34px;
    margin-left: -430px;
    margin-top: 30px;
}
.nav .goodsSort aside ul li{
    height: 30px;
    border-bottom: 1px dashed #999;
    overflow: hidden;
}
.nav .goodsSort aside ul>li>div{
    float: left;
    width: 60px;
    line-height: 30px;
    text-align: right;
    color: #e74085;
    font-weight: 800;
    /* border-bottom: 1px dashed #999; */
}
.nav .goodsSort aside ul>li>a{
    line-height: 30px;
    float: left;
    margin-left: 15px;
}
.nav .goodsSort aside ul>li>b{
    line-height: 30px;
    margin-left: 15px;
    float: left;
}





















.nav .clear-fix li{
    float: left;
    display: inline;
    transform-style: preserve-3d;
}
.nav>ul a{
    float: left;
    display: inline;
    line-height: 34px;
    font-size: 16px;
    color: #000;
    font-weight: 700;
    padding: 0 20px;
    height: 34px;
}
.nav>ul>li:nth-child(1) a{
    padding: 0 0 0 25px;
}
.nav>ul b{
    height:20px;
    display: inline-block;
    width: 13px;
    background:url(../images/bg2.png) no-repeat  -35px -1298px;
    margin-top:-2px;
    margin-right: 6px;
    vertical-align: middle;
}
.nav>.clear-fix li:hover a{
    color: #e74085;
}
.nav>.clear-fix li:hover b{
    animation: rotate 0.5s;
}



/* banner图 */
.banner-bg{
    width: 100%;
    height: 360px;
    background: rgb(58, 0, 101);

}
.banner{
    position: relative;
}
.banner .banners{
    width: 774px;
    height: 360px;
    margin: 0 auto;
    position: absolute;
    left: 227px;

}

.banners .imgs{width: 100%;height: 100%;position: relative;overflow: hidden;}
.banners .imgs img{width:100%;height: 100%;position: absolute;top: 0;}
.banners .btns *{position: absolute;top: 50%;width: 40px;height: 40px;line-height: 40px;text-align: center;border: 0;background-color: rgba(200, 200, 200, 0.5);font-size: 20px;transform: translateY(-50%);padding: 0;}
.banners .btns #left{left: 0;}
.banners .btns #right{right: 0;}
.banners .list{display: flex;justify-content: center;align-items: center;position: absolute;bottom: 0;left: 0;right: 0;}
.banners .list span{width: 20px;height: 20px;border-radius: 50%;background: rgba(100, 100, 100, 0.5);margin-left: 5px;text-align: center;cursor:pointer;}
.banner aside{
    width: 200px;
    height: 360px;
    background-color: #fff;
    position: absolute;
    right: 0px;
    top: 0px;
}
.banner>aside div{
    box-sizing: border-box;
    border-bottom : 1px dashed #999 ;
    overflow: hidden;
}
.banner>aside>div:nth-child(3){
    border: none;
}
.banner aside img{
    display: block;
    width: 200px;
    height: 120px;
    margin-left: 0px;
    transition: 0.5s;
}
.banner>aside>div:hover img{
    margin-left: -10px;
}
/* 主体内容 */
main{
    width: 100%;
}
.content{
    margin-top: 30px;
}
.content hgroup{
    padding-bottom: 10px;
    color: #333;
    font-size: 20px;
    margin-right: 5px;
}
.content i{
    display: block;
    width: 30px;
    height: 30px;
    background: url(../images/cate_721.png);
}
.content ul li{
    float: left;
    border-bottom: 1px solid #e7e7e7;
    border-right: 1px solid #e7e7e7;
    width: 196px;
    padding: 10px;
    height: 217px;
}
.content ul div{
    margin: 0px auto;
    width: 136px;
    height: 136px;
    margin-top: 5px;      
}
.content ul img{
    width: 100%;
    transition: 0.5s;
}
.content>ul div:hover img{
    margin-top: -10px;
}
.content ul p{
    height: 32px;
    color: #666;
    font-size: 12px;
    margin-top: 15px;
    margin-bottom: 5px;
}
.content ul span{
    color: #dd2727;
    font-size: 16px;
}
.content ol{
    box-sizing: border-box;
    border-right: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
}
.content ol li{
    float: left;
    width: 148px;
    height: 66px;
    border-left: 1px solid #e7e7e7;
    overflow: hidden;
    text-align: center;
}
.content ol img{
    width: 100px;
    height: 48px;
    margin-top: 8px;
}
/* 底部主体区域 */
.footer-main{
    background: #f5f5f5;
}
.footer-top{
    border-bottom: 1px solid #e5e5e5;
    height: 100px;    
}
.footer-top ul{
    padding: 19px 0;
}
.footer-top li{
    float: left;
    width: 200px;
    transition: 0.5s;
}
.footer-top a{
    display: block;
    width: 128px;
    height: 62px;
    font-size: 18px;
    padding-left: 72px;
    line-height: 62px;
    color: #444;
    font-weight: 700;
}
.footer-top li:hover{
    margin-top: -6px;
}
.footer-top li:hover a{
    color: #e74085;
}
.footer{
    padding-top: 25px;
}
.footer section{
    padding-bottom: 25px;
    border-bottom: 1px solid #e5e5e5;
}
.footer nav{
    padding-top: 20px;
}
.footer nav p:hover a{
    color: #e74085;
    text-decoration: underline;
}
.footer address:nth-of-type(1){
    margin-top: -5px;
    text-align: center;
    margin-right: 36px;
    margin-left: 150px;
}
.footer address:nth-of-type(2){
    margin-top: -5px;
    text-align: center;
    margin-left: 100px;
}
.footer>nav{
    width: 1150px;
    height: 20px;
    text-align: center;
}
.footer>nav a{
    display: inline-block;
    margin: 0 15px 10px 0;
}
.footer>nav a:hover{
    color: #e74085;
    text-decoration: underline;
}
.service{
    margin-top: 20px;
    text-align: center;
}
.service img{
    margin-right: 3px;
}
.copyright{
    padding: 20px 0 40px;
    color: #000;
    text-align: center;
}
.copyright a:hover{
    color: #e74085;
    text-decoration: underline;
}